
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for使用过程添加key</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="v in name">{{v}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) in name">{{index+1}}.{{item}}</li>
        </ul>
        <!-- key属性  中间插入值  ，绑定key，key要保证唯一 -->
        <ul>
            <li v-for="item in name" :key="item">{{item}}</li>
        </ul>
        <button @click="btnClick">点击添加</button>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                name:['a','b','c','d','e']
            },
            methods:{
                btnClick(){
                    // 1.push方法   响应式   push，可变函数
                    // this.name.push('aaa');

                    // 2.通过索引值修改数组中的元素   非响应式
                    this.name[0] = 'bbb';
                    // 替换值时改用下面这个方法即可做到响应式 ,推荐第一个方式
                    // 第一个
                    this.name.splice(0,1,'bbb');
                    // 第二个
                    Vue.set(this.name,0,'bbb');

                    // 响应式
                    // pop()：删除数组中的最后一个元素
                    // this.name.pop();

                    // shift()：删除数组中的第一个元素
                    // this.name.shift();

                    // unshift()：在数组最前面添加元素，可传多个值，  可变函数
                    // this.name.unshift('aaa');

                    // splice(start)：
                    // 作用：删除元素/插入元素/替换元素
                    // 第一个删除为起始元素
                    // 删除元素：第二个参数传入你要删除几个元素,如果未传参数，删完后面的内容
                    // this.name.splice(1,'aaa');
                    // const start = 2;
                    // this.name.splice(start,this.name.length-start);
                    // this.name.splice(start);

                    // 替换元素：第二个参数表示我们要替换几个元素，后面是用于替换前面的元素
                    // this.name.splice(2,2,'x','y');

                    // 插入元素：第二个参数传入0，并且后面跟上我们要插入的元素


                    // sort()
                    // this.name.sort();

                    // reverse()
                    // this.name.reverse();

                }
            }
        })

        // // 两个
        // function sum(num1,num2){
        //     return num1 + num2 ;
        // }

        // // 三个
        // function sum(num1,num2,num3){
        //     return num1 + num2 + num3 ;
        // }

        // 数量少时可以写，多的时候就过于麻烦，此时应该如下处理
        // 可变参数
        function sum(...num){

        }
        sum(1,2,3,4,5,6,7,8,9,10);
    </script>
</body>
</html>